import React, { useState } from 'react';

import './index.css';

function Test() {
    const [value, setValue] = useState('guang')
    console.log('组件渲染了');
    function changeInput (e) {
        // 受控 => 意思是代码控制了
        console.log(e.target.value, 'e');
        // 每次会让组件重新渲染一次，不好
        setValue(e.target.value) // 没有这行代码，表单不能改
    }

    return <div>
        <input type="text" value={value} onChange={changeInput} />
    </div>
}

function App() {

  return (
    <div className="App">
      <Test />
    </div>
  );
}

export default App;
